<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* body {
            background:#000
        } */
        #box {
            width:80%;
            height: 450px;
            border:1px solid #ccc;
            margin: 20px auto;;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script src="./lib/echarts.min.js"></script>
<script type='module'>
    //第一步,引入地图数据
   import chinaData from './data/china.js';
   // import nanyabData from './data/nanyang.js';
 //   console.log('china:',china)
    const box=document.querySelector('#box')
    //初始为echarts图表对象
    const myChart=echarts.init(box)
    //第二步：注册地图
  // echarts.registerMap('地图名',地图数据)
   echarts.registerMap('china',chinaData)

    //配置图表对象
    const options={
        title:{
            text:'Echarts地图',
           // subtext:'Echarts第二节'
        },
        //渲染地图
       // geo:{}
       series:[
        {
            name:'中国地图',
            type:'map',
           
            map:'china',
            layoutCenter:['50%','70%'],
            layoutSize:'110%',
            //是否平移
            roam:true, //支持scale:缩放,move:移动,true：scale和move都开启
            //高亮样式--鼠标经过
            emphasis:{
              label:{
                color:'#ff0'
              },
               itemStyle:{
                 areaColor:"#f00"
               }
            },
            //选中后的地图样式
            select:{
                //选中广西
                label:{
                    show:true,
                    color:'#fff'
                },
                //选中的文本样式式
                itemStyle:{
                    areaColor:"green" 
                }
            },
            //是否支持多选
            selectedMode:'multiple',
            //地图区域样式
            itemStyle:{
                //opacity:0.3,
                areaColor:{
                      //径向渐变
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [{
                            offset: 0, color: 'red' // 0% 处的颜色
                        }, 
                      //  { offset: 0.5, color: 'green' },
                        {
                            offset: 1, color: 'blue' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                        },
                borderColor:"#ff0",
                borderWidth:1
            },
            //是否显示地图省份名称
            label:{
              //  show:true
            },
            //指定特定区域显示地图省份
            regions:[
                {
                    name:'黑龙江省',
                    label:{
                        show:true,
                        color:'#ff0',
                        rotate:-30,
                        offset:[5,10]
                    }
                }
            ]
            
        }
            
        
       ]
    }

    //渲染图表
    myChart.setOption(options)



</script>
</html>